<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="请输入关键搜索"  v-model="fromData.kw" :show-action="false" :clearabled="true" :animation="false"
					shape="round" bgColor="#F5F6FA" height="72rpx" searchIconColor="#999999" placeholderColor="#999999" @change="changekeword"
					:inputStyle="{
						color: '#333333',
						backgroundColor: '#F5F6FA',
					}"></u-search>
			</view>
		</view>
		<view class="content-box">
			<view class="content-total">
				共 {{total}} 条记录
			</view>
			<view class="empty-review" v-if="list.length == 0">
				<image src='../static/images/empty-review.png' mode="aspectFit"></image>
			</view>
			<view class="content-list">
				<view class="content-item" v-for="item in list" :key="item.id"  @click="handleSelect(item)">
					<view class="content-item-check" :class="selectedCustomers.findIndex(c=>c.id==item.id) > -1 ? 'content-item-checked' : ''">
						
					</view>
					
					<view class="content-item-cell" style="margin-bottom: 8rpx;">
						<view class="content-item-name"> {{item.name}} </view>
						<view class="content-item-type"> {{item.typeName || '类型'}} </view>
					</view>
					<view class="content-item-cell" style="margin-bottom: 14rpx;">
						<view class="content-item-mobile"> {{item.mobile}} </view>
						<view class="content-item-date"> {{item.date || '日期'}} </view>
					</view>
					<view class="content-item-cell" v-if="item.wechat">
						<view class="content-item-wechat"> 微信：{{item.wechat}} </view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="form-bottom-opt">
			<u-button @click="submit" :custom-style="submitBtnStyle">提交</u-button>
		</view>
	</view>
</template>


<script>
	import {
		customerIndex
	} from "@/api/part2"
export default {
	data() {
		return {
			fromData: {
				page: 1,
				page_size: 10,
				kw:''
			},
			total: 0,
			list:[],
			selectedCustomers:[],
			submitBtnStyle: {
				background: "#FE4F04",
				boShadow: "0rpx 4rpx 8rpx 0rpx rgba(254,79,4,0.5)",
				borderRadius: "44rpx",
				fontSize: "30rpx",
				color: "#FFFFFF",
				height: "88rpx",
			}
		};
	},
	onLoad(options) {
		this.init()
	},
	async onReachBottom() {
		this.fromData.page++
		this.init()
	},
	methods: {
		changekeword() {
			if (this.timerId) {
				clearInterval(this.timerId)
			}
			let that = this
			this.timerId = setTimeout(() => {
				that.handleFilter()
			}, 200)
		},
		handleFilter() {
			this.formData.page = 1
			this.list = []
			this.init()
		},
		init() {
			customerIndex(this.fromData).then(res => {
				console.log(res.data.data);
				res.data.data.data.forEach((item) => {
					this.list.push(item)
				})
				this.total = res.data.data.total
			})
		},
		handleToAdd(){
			uni.navigateTo({
				url:'/pages-landlord/customer/detail'
			})
		},
		handleSelect(item){
			let index = this.selectedCustomers.findIndex(c=>c.id==item.id)
			if(index > -1) {
				this.selectedCustomers.splice(index, 1);
			}else {
				this.selectedCustomers.push(item)
			}
		},
		submit(){
			if(this.selectedCustomers.length <=0) {
				uni.showToast({
					icon:'none',
					title:'请选择客户'
				})
				return
			}
			uni.navigateBack({
					delta: 1,
					success: () => {
							// 通过事件或全局方式传参
							uni.$emit('customerSelected', this.selectedCustomers);
					}
			});
		}
	},
};
</script>

<style lang="less" scoped>
	.search-box {
		padding: 12rpx 20rpx 24rpx 32rpx;
		background-color: #fff;
		display: flex;
	}
	.add-btn {
		padding: 20rpx;
	}
	.content-box {
		padding: 0 32rpx;
	}
	.content-total {
		padding: 16rpx 0;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
	}
	.content-item {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.01);
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		padding-left: 100rpx;
		position: relative;
		.content-item-check {
			width: 36rpx;
			height: 36rpx;
			border: 2rpx solid #D1D2D4;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 32rpx;
			transform: translateY(-50%);
		}
		.content-item-checked {
			border:none;
			background-image: url('@/static/selected.png');
		}
	}
	.content-item-cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 36rpx;
	}
	.content-item-name {
		font-family: PingFangHK, PingFangHK;
		font-weight: 700;
		font-size: 30rpx;
		color: #222222;
		line-height: 42rpx;
	}
	.content-item-type {
	}
	.content-item-mobile {
		color: #444444;
	}
	.content-item-date {
	}
	.content-item-wechat {
		font-size: 20rpx;
		color: #999999;
		line-height: 28rpx;
	}
	
	
	.form-bottom-opt {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		/* 关键样式 - 使用 constant 和 env 兼容不同设备 */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		/* 其他样式按需添加 */
		background-color: #F5F6FA;
		padding: 20rpx 40rpx;
	}
	
	.empty-review {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 0;
	
		image {
			width: 328rpx;
			height: 208rpx;
			margin-bottom: 24rpx;
		}
	}
</style>